DAMN = (typeof DAMN != "undefined")?  DAMN : {};

DAMN.Collections = new function() 
{   
  this.AttachTo = function(parent) {
    parent.tabs('add', '#tabs-Collections', "Collections");
    this.tab = $("#tabs-Collections");

    var pa = $('<div class="container">\
                  <div class="content row" style="height: 30%;">\
                    <div class="content">Assigned collections</div><div class="list"><div id="collectionstop"></div></div>\
                  </div>\
                  <div class="content row" style="height: 50%;">\
                    <div class="content"  style="margin-bottom:4px;">\
                    <div style="position: relative; margin-top:4px; margin-bottom:4px;"> \
                      <input id="collectionsearch" name="search" style="width:99%;" class="ui-widget ui-state-default ui-widget-header"/> \
                      <span style="position: absolute; top: 0; right: 0; margin-right: 5px; cursor: pointer;" class="ui-icon ui-icon-search"></span> \
                    </div> </div>\
                    <div class="list" style="height: 68%;"><div id="collectionsbot"></div></div>\
                  </div>\
                </div>');
    this.tab.css('height', '100%');
    this.tab.append(pa);
    
    pa.find('.content').addClass('ui-widget ui-widget-content');
    
    this.top = $("#collectionstop");
    this.bot = $("#collectionsbot");
    
    DAMN.AssetMananger.Register("asset", this.Collections.bind(this));
    
    var BOT = this.bot;
    $.getJSON("/collections/", function(data) {
      BOT.empty();
      
      for(m in data){
        BOT.append($('<p collection="'+data[m].id+'">' + data[m].name + '<span class="add_collection ui-icon ui-icon-plusthick"></span></p>'));
      }
      
      $("#collectionsearch").keyup(function () {
        var filter = $(this).val(), count = 0;
        $("#collectionsbot p[collection]").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide();
                $(this).addClass('collection-search-hidden');
            } else {
                $(this).show();
                $(this).removeClass('collection-search-hidden');
                $(this).parent().show();
                count++;
            }
        });
        
        BOT.children('div').each(function () {
          var hidden = $(this).children('p.collection-search-hidden').length;
          var shown = $(this).children('p').length;
          if (hidden == shown){
             $(this).hide();
          }
        });
      });

  	});
  	
  	var self = this;
  	
  	
  	$('.add_collection').live('click', function() {
      if (DAMN.AssetMananger.selected.length == 1) {
        var assetId = DAMN.AssetMananger.selected[0].attr("assetid");
        var collectionId = $(this).parent().attr("collection");
        DAMN.Log.debug("PRESSED add_collection "+assetId+', '+collectionId);
        $.post('/assets/'+assetId+'/collections/add/', {'collection':collectionId}, function(data, textStatus, XMLHttpRequest) {
          DAMN.Log.debug("add_collection: "+data+', '+textStatus+', '+XMLHttpRequest.status);
          if (textStatus=='success') {
            self.Refresh(assetId, self.top);
          }
        });
      }
		});
		
		$('.remove_collection').live('click', function() {
        var assetId = DAMN.AssetMananger.selected[0].attr("assetid");
        var collectionId = $(this).parent().attr("collection");
        DAMN.Log.debug("PRESSED remove_collection "+assetId+', '+collectionId);
        $.post('/assets/'+assetId+'/collections/remove/', {'collection':collectionId}, function(data, textStatus, XMLHttpRequest) {
          DAMN.Log.debug("remove_collection: "+data+', '+textStatus+', '+XMLHttpRequest.status);
          if (textStatus=='success') {
            self.Refresh(assetId, self.top);
          }
        });
		});
		
	};
	
	this.Refresh = function(id, target) 
	{
	   $.getJSON("/assets/"+id+"/collections/", function(data){
        var html = "";                               
        for(m in data){
          html += '<p assetid="'+id+'" collection="'+data[m].id+'">' + data[m].name + '<span class="remove_collection ui-icon ui-icon-closethick"></span></p>';
        }
        target.html(html);
      });
  };

	
	this.Collections = function(op, el) 
  {   
    var BOT = this.bot;
    var TOP = this.top;
    TOP.empty();
    if (op == 'SELECT') { 
      if (DAMN.AssetMananger.selected.length == 1) {
        this.Refresh(el.data("assetid"), TOP);
      }
      else {
       TOP.append("<p>Multiple selected."+DAMN.AssetMananger.selected.length+"</p>");
      }
    }
    else {
      TOP.append("<p>Nothing selected.</p>");
    }
  };
  		
};

